<template>
    <!-- 最外层容器，包含整个选择器组件 -->
    <div class="base-select">
      <!-- 选择器头部，点击触发下拉框展开/收起 -->
      <div 
        class="select-header"
        @click="toggleDropdown"
      >
        <!-- 显示当前选中的值或占位符 -->
        <span class="selected-value">
          {{ selectedLabel || placeholder }}
        </span>
        <!-- 下拉箭头图标，根据展开状态旋转 -->
        <span class="arrow" :class="{ 'arrow-up': isOpen }"></span>
      </div>
      
      <!-- 下拉选项列表，仅在展开时显示 -->
      <div v-show="isOpen" class="dropdown-options">
        <!-- 遍历选项列表，渲染每个选项 -->
        <div
          v-for="(option, index) in options"
          :key="index"
          class="option"
          @click="selectOption(option)"
          :class="{ 'selected': isSelected(option) }"
        >
          {{ option.label }}
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  // 导入必要的 Vue 组合式 API
  import { ref, computed } from 'vue'
  
  // 定义组件属性
  const props = defineProps({
    // 支持 v-model 双向绑定，可以是字符串、数字或对象类型
    modelValue: {
      type: [String, Number, Object],
      default: null
    },
    // 选项列表，必须是包含 value 和 label 属性的对象数组
    options: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(option => 
          typeof option === 'object' && 
          'value' in option && 
          'label' in option
        )
      }
    },
    // 占位符文本
    placeholder: {
      type: String,
      default: '请选择'
    }
  })
  
  // 定义组件事件
  const emit = defineEmits(['update:modelValue', 'change'])
  
  // 控制下拉框展开/收起状态
  const isOpen = ref(false)
  
  // 计算当前选中项的标签文本
  const selectedLabel = computed(() => {
    const selectedOption = props.options.find(option => option.value === props.modelValue)
    return selectedOption ? selectedOption.label : ''
  })
  
  // 切换下拉框展开/收起状态
  const toggleDropdown = () => {
    isOpen.value = !isOpen.value
  }
  
  // 选择选项时的处理函数
  const selectOption = (option) => {
    // 更新 v-model 的值
    emit('update:modelValue', option.value)
    // 触发 change 事件
    emit('change', option)
    // 关闭下拉框
    isOpen.value = false
  }
  
  // 判断选项是否被选中
  const isSelected = (option) => {
    return option.value === props.modelValue
  }
  </script>
  
  <style scoped>
  /* 选择器容器样式 */
  .base-select {
    position: relative;
    width: 120.2px;
    height: 43.8px;
    /* 设置背景图片 */
    background-image: url("/layout/selectBak.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 40px;
    z-index: 2000;
  }
  
  /* 选择器头部样式 */
  .select-header {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 选中值文本样式 */
  .selected-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
  }
  
  /* 下拉箭头样式 */
  .arrow {
    transition: transform 0.2s;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image: url("/layout/xia.png");
    padding: 15px;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* 箭头向上旋转样式 */
  .arrow-up {
    transform: rotate(180deg);
  }
  
  /* 下拉选项列表样式 */
  .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    color: #fff;
    border-radius: 4px;
    background-color: rgba(65, 148, 237, 0.187);
    z-index: 1000;
    margin-top: 4px;
  }
  
  /* 单个选项样式 */
  .option {
    padding: 8px 12px;
    cursor: pointer;
  }
  
  /* 选项悬停效果 */
  .option:hover {
    background-image: url("/layout/sexiang.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
  }
  
  /* 选中选项样式 */
  .option.selected {
    background-image: url("/layout/sexiang.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
  }
  </style>